<template>
    <div>
        <Row class="formRow">
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">类型名称</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.typeName" placeholder="类型名称" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">字典编号</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.dataCode" placeholder="类型名称" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">字典名称</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.dataName" placeholder="类型名称" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">是否有效</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.valid">
              <Option  value="1" >是</Option>
              <Option  value="0" >否</Option>
            </Select>
          </Col>
          <Col span="8" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
            <Button type="primary" @click="onAdd">添加</Button>
          </Col>
        </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
      v-model="add"
      title="添加"
      @on-ok="addok"
      @on-cancel="cancel('您取消了操作')" width="600">
      <Row>

        <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>类型名称</span><Select   v-model="addForm.typeCode" style="width: 200px">
        <Option  v-for="list in listData" :value="list.typeCode" :key="list.id" >{{list.typeName}}</Option>
      </Select></Col>
        <Col span="12">   <span class="ModelInputTitle">是否有效</span><Select   v-model="addForm.valid" style="width: 200px">
        <Option  value="1" >是</Option>
        <Option  value="0" >否</Option>
      </Select></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>字典编号</span><Input v-model="addForm.dataCode" style="width: 200px"></Input></Col>
        <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>字典名称</span><Input v-model="addForm.dataName" style="width: 200px"></Input></Col>
      </Row>
      <Row style="margin-top: 20px">

        <Col span="24">   <span class="ModelInputTitle">备注</span><Input v-model="addForm.remark" style="width: 485px"></Input></Col>
      </Row>
    </Modal>


      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>类型名称</span><Select   v-model="editForm.typeCode" style="width: 200px">
          <Option  v-for="list in listData" :value="list.typeCode" :key="list.id" >{{list.typeName}}</Option>
        </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">是否有效</span><Select   v-model="editForm.valid" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>字典编号</span><Input v-model="editForm.dataCode" style="width: 200px" disabled></Input></Col>
          <Col span="12">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>字典名称</span><Input v-model="editForm.dataName" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24"> <span class="ModelInputTitle">备注</span><Input v-model="editForm.remark" style="width: 485px"></Input></Col>
        </Row>
      </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
  import axios from  "axios"
    export default {
        data() {
            return {
              formInline:{
                valid:"",
                typeName:"",
                dataCode:"",
                dataName:"",
                typeCode:""
              },
              addForm:{
                typeCode:"",
                typeName:"",
                dataCode:"",
                dataName:"",
                valid:"",
                remark:"",
                id:""
              },
              edit:false,
              editForm:{
                typeCode:"",
                typeName:"",
                dataCode:"",
                dataName:"",
                valid:"",
                remark:""
              },
              loading:true,
              add:false,
              page:1,
              pageSize:10,
              placement:"bottom",
              tableData:[],
              total:0,
              listData:[],//类型列表
              cloums:[
                {
                  title: '类型编号',
                  width: 200,
                  key:"typeCode",
                  align:"center"
                },
                {
                  title: '类型名称',
                  width: 200,
                  key:"typeName",
                  align:"center"
                },
                {
                  title: '字典编号',
                  width: 200,
                  key:"dataCode",
                  align:"center"
                },
                {
                  title: '字典名称',
                  width: 200,
                  key:"dataName",
                  align:"center"
                },
                {
                  title: '是否有效',
                  width: 200,
                  key:"valid",
                  align:"center"
                },
                {
                  title: '备注',
                  key:"remark",
                  width: 200,
                  align:"center"
                },
                {
                  title: '创建人',
                  width: 200,
                  key:"creator",
                  align:"center"
                },
                {
                  title: '更新人',
                  width: 200,
                  key:"updater",
                  align:"center",
                },
                {
                  title:"操作",
                  width:200,
                  fixed:"right",
                  align:"center",
                  render:(h,params)=>{
                    return h("div",[h("Button",{
                      props:{
                        type:"primary"
                      },
                      on:{
                        click:()=>{
                          console.log(params.row)
                          this.edit = true;
//                          for(let i in this.listData){
//                            if(this.listData[i].typeName ==params.row.typeName){
//                              this.editForm.typeName = this.listData[i].typeCode;
//                            }
//                          }
                          this.editForm.typeCode = params.row.typeCode;
                          this.editForm.typeName = params.row.typeName;
                          this.editForm.dataCode = params.row.dataCode;
                          this.editForm.dataName = params.row.dataName;
                          this.editForm.remark = params.row.remark;
                          this.editForm.valid = params.row.valid=="是"?"1":"0";
                          this.editForm.id = params.row.id;
                        }
                      }
                    },"编辑")])
                  }

                }
              ]
            }
        },
      mounted(){
//          console.log(location.href.replace("http://localhost:8080",""))
//          this.$router.push({path:location.href.replace("http://localhost:8080","")})
          this.init();
          this.getList();

      },
      methods:{
          init(page,pageSize,typeCode,typeName,dataCode,dataName,valid){
            var _this = this;
            var qs = require("qs");
            var param = qs.stringify({
              page:page?page:_this.page,
              pageSize:pageSize?pageSize:_this.pageSize,
              typeCode:typeCode?typeCode:"",
              typeName:typeName?typeName:"",
              dataCode:dataCode?dataCode:"",
              dataName:dataName?dataName:"",
              valid:valid?valid:""
            });
            axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
            axios.post("/dictData/querySysDictDataListByPage",param).then((res)=>{
              if(res.data.code=="000000"){
                _this.loading = false;
                _this.total = res.data.count;
                _this.tableData = res.data.data;
                for(var i in _this.tableData){
                  _this.tableData[i].valid=_this.tableData[i].valid==1?"是":"否";
                }
              }else{
                _this.$Notice.error({title:res.data.msg})
              }
            })
          },
        getList(){
            axios.post("/dictType/queryAllSysDictTypeList").then((res)=>{
              if(res.data.code=="000000"){
                this.listData = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg})
              }
            })
        },
        onSubmit(){
            this.init(this.page,this.pageSize,this.formInline.typeCode,this.formInline.typeName,this.formInline.dataCode,this.formInline.dataName,this.formInline.valid);
        },
        resetForm(){
          this.formInline.valid = "";
          this.formInline.typeName = "";
          this.formInline.dataCode = "";
          this.formInline.dataName = "";

        },
        addok(){
          console.log(this.addForm.typeName)
          for(let i in this.listData){
            if(this.listData[i].typeCode ==this.addForm.typeCode){
              this.addForm.typeName = this.listData[i].typeName;
            }
          }
          var _this = this;
          var qs = require("qs");
          var param = qs.stringify({
            typeCode:this.addForm.typeCode,
            typeName:this.addForm.typeName,
            dataCode:this.addForm.dataCode,
            dataName:this.addForm.dataName,
            valid:this.addForm.valid,
            remark:this.addForm.remark

          })
          axios.post("/dictData/addDictData",param).then((res)=>{
            if(res.data.code=="000000"){
              _this.$Notice.success({title:"添加成功"});
              _this.init();
              _this.getList();
            }else{
              _this.$Notice.error({title:res.data.msg});
            }
          })
        },
        onAdd(){
            this.add = true;
        },
        editok(){
          var _this = this;
          var qs = require("qs");
          for(let i in this.listData){
            if(this.listData[i].typeCode ==this.editForm.typeCode){
              this.editForm.typeName = this.listData[i].typeName;
            }
          }

          var param = qs.stringify({
            typeCode:this.editForm.typeCode,
            typeName:this.editForm.typeName,
            dataCode:this.editForm.dataCode,
            dataName:this.editForm.dataName,
            valid:this.editForm.valid,
            remark:this.editForm.remark,
            id:this.editForm.id
          })
          axios.post("/dictData/updateDictData",param).then((res)=>{
            if(res.data.code=="000000"){
              _this.$Notice.success({title:"修改成功"});
              _this.init();
              _this.getList();
            }else{
              _this.$Notice.error({title:res.data.msg})
            }
          })
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
      }
    }
</script>
